<template>
  <div class="recommend">
    <!-- 此处放入插槽 可以根据用户更改xxx推荐的内容 -->
    <Card>
      <span>小杰推荐</span>
    </Card>
    <ul>
        <li v-for="(item,index) in recommendList" :key="index" @click="goDetail(item.id)">
          <h2>
            <img :src="item.imgUrl" alt="">
          </h2>
          <div>
            <h3>{{item.name}}</h3>
            <p>{{item.content}}</p>
            <div class="price">
              <span>￥</span>
              <b>{{item.price}}</b>
            </div>
          </div>
        </li>
    </ul>
  </div>
</template>

<script>
import Card from '@/components/home/Card.vue'
export default {
    name:'Recommend',
    props:{
      recommendList:Array
    },
    data(){
        return{
            // recommendList:[
            //   {
            //     id:1,
            //     name:'爆款零食大礼包',
            //     content:'买一箱送一箱品牌零食',
            //     price:'69.80',
            //     imgUrl:'./images/recommend1.jpeg'
            //   },
            //   {
            //     id:2,
            //     name:'众望小麻花',
            //     content:'好吃不贵，吃麻花就选众望！',
            //     price:'19.80',
            //     imgUrl:'./images/recommend2.jpeg'
            //   },
            //   {
            //     id:3,
            //     name:'知味艾草青团',
            //     content:'网红芝士奶酪青团 天然艾草 百年老字号',
            //     price:'18.53',
            //     imgUrl:'./images/recommend3.jpeg'
            //   },
            //   {
            //     id:4,
            //     name:'法丽兹网红夹心饼干',
            //     content:'招牌夹心曲奇.4种口味',
            //     price:'39.80',
            //     imgUrl:'./images/recommend4.jpeg'
            //   },
            // ]
        }
    },
    components:{
      Card,
    },
    methods:{
      goDetail(id){
        this.$router.push({
          path:'/detail',
          query:{
            id
          }
        })
      }
    }

}
</script>

<style lang="less" scoped>
.recommend{
  @rootsize:37.5rem;
  background-color: #fff;
  ul{
    li{
      position: relative;
      margin: (8 / @rootsize);
      h2{
        background-color: #f0f0f0;
        border-radius:(10 / @rootsize);
        img{
          width: (120 / @rootsize);
          height: (120 / @rootsize);
          margin-left: (10 / @rootsize);
          margin-top: (10 / @rootsize);
        }
      }
      >div{
        position: absolute;
        top: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        padding: (20 / @rootsize);
        h3{
          text-align: center;
          font-size: (14 / @rootsize);
        }
        p{
          width: (160 / @rootsize);
          font-size: (16 / @rootsize);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;

        }
        .price{
          color:red;
          text-align: right !important;
          margin-top: (25 /@rootsize);
          font-size: (16 / @rootsize);
          span{
            font-size: (12 / @rootsize);
          }
        }
      }
    }
  }
}

</style>